<template>
  <div>
    <s-header :name="'生成订单'"></s-header>
    <div class="address-wrap">
      <div class="name" @click="goTo">
        <span>{{ address.userName }} </span>
        <span>{{ address.userPhone }}</span>
      </div>
      <div class="address">
        {{ address.provinceName }} {{ address.cityName }} {{ address.regionName }} {{ address.detailAddress }}
      </div>
      <van-icon class="arrow" name="arrow" />
    </div>
  </div>
</template>

<script>
  import sHeader from '../../components/Header.vue'
  import {
    reactive,
    onMounted,
    toRefs,
    computed
  } from 'vue'
  import {
    Toast
  } from 'vant'
  import {
    useRoute,
    useRouter
  } from 'vue-router'
  import api from '../'
  export default {
    components: {
      sHeader
    },
    setup() {
      const router = useRouter()
      const route = useRoute()
      const state = reactive({
        cartList: [],
        address: {},
        showPay: false,
        orderNo: '',
        cartItemIds: []
      })

      onMounted(() => {
        init()
      })

      const init = async () => {
        Toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        const {
          addressId,
          cartItemIds
        } = route.query
        const _cartItemIds = cartItemIds ? JSON.parse(cartItemIds) : JSON.parse(getLocal('cartItemIds'))
        console.log('cartItemIds', cartItemIds)
        setLocal('cartItemIds', JSON.stringify(_cartItemIds))
        const {
          data: list
        } = await getByCartItemIds({
          cartItemIds: _cartItemIds.join(',')
        })
        const {
          data: address
        } = addressId ? await getAddressDetail(addressId) : await getDefaultAddress()
        if (!address) {
          router.push({
            path: '/address'
          })
          return
        }
        state.cartList = list
        state.address = address
        Toast.clear()
      }
      return {
        ...toRefs(state),
        goTo,
        deleteLocal,
        handleCreateOrder,
        close,
        handlePayOrder,
        total
      }
    }
  }
</script>

<style lang="less" scoped>
  .address-wrap {
    margin-bottom: 20px;
    background: #fff;
    position: relative;
    font-size: 14px;
    padding: 15px;
    color: #222333;

    .name,
    .address {
      margin: 10px 0;
    }

    .arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
      background-size: 80px;
      content: '';
    }
  }
</style>